<template>
	<view>
		<!-- tab -->
		<view class="tab-box">
			<u-tabs bg-color="#ffffff" inactive-color="#999" name="name" :list="tabs" active-color="#616161"
				:is-scroll="true" :current="current" @change="tabChange"></u-tabs>
		</view>
		<view>
			<view class="msg-wrap">
				<block v-for="(item,index) in list" :key="index">
					<view class="comment-msg-item">
						<navigator :url="'/pages/user/home?uuid='+ item.user.uuid" hover-class="none">
							<cos-avatar class="avatar" :src="item.user.avatar" :showSex="item.user.gender?true:false" :sexIcon="item.user.gender_label"></cos-avatar>
						</navigator>
						<view class="msg-c" @tap="jump('/pages/message/shopSignDetails?id='+item.id)">
							<view class="msg-c-t d-flex align-items-center">
								<view>
									<view class="username d-flex align-items-center">
										<view class="mr-10">{{item.user.nickname}}</view>
										<view class="tag-box d-flex" v-if="item.user.is_guaranty || item.user.is_cert">
											<view class="mr-10 tag tag-guaranty" v-if="item.user.is_guaranty==1"><u-icon name='rmb' color="#ffffff" size='23'></u-icon>已担保</view>
											<view class="mr-10 tag tag-cert" v-if="item.user.is_cert==1"><u-icon name='account-fill' color="#ffffff" size='23'></u-icon>已认证</view>
										</view>
									</view>
									<view class="text-color-assist">
										<text class="mr-10" v-if='item.user.city||item.user.province'>{{item.user.city||item.user.province}} |</text>
										<text class="mr-10">{{ item.user.identity_label }}</text>
									</view>
								</view>
								<!-- <view class="time">{{$f.timeAgo(item.time_diff)}}</view> -->
								
							</view>
							<view class="msg-c-txt">
								<text>报名备注：{{item.introduce}}</text>
							</view>
							<view class="post-c mb-20">
								<view class="post-c-txt">
									{{item.task.title}}
								</view>
							</view>
							<view class="d-flex align-items-center justify-content-between text-color-assist">
								<view>{{$f.timeAgo(item.time_diff)}} | {{item.task.need_label}}</view>
								<view class="d-flex">
									<view v-if="item.status==0">等待开启合作</view>
									<view v-if="item.status==1">合作已开启，等待对方上传作品</view>
									<view v-if="item.status==2">对方已上传作品，等待确认</view>
									<view v-if="item.status==99">合作完成</view>
									<view v-if="item.status==-1">未合作：{{item.reason}}</view>
									<view v-if="item.status==-2">已驳回：{{item.reason}}</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view style="margin: 30rpx 0;">
				<u-loadmore :status="loadStatus" />
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations } from 'vuex'
	import postList from '../../components/post-list/post-list.vue';
	export default {
		components: {
			postList
		},
		data() {
			return {
				loading:true,
				tabs: [{
						name: '全部',
						status:'all'
					},{
						name: '待合作',
						status:0
					},{
						name: '待上传',
						status:1
					},{
						name: '待确认',
						status:2
					},{
						name: '合作成功',
						status:99
					},{
						name: '未合作',
						status:-1
					}
				],
				current: 0,
				user: {},
				list:[],
				loadStatus: "loading",
				page: 1,
			};
		},
		computed:{
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad(options) {
			this.getList();	
		},
		onReachBottom() {
			if(this.loadStatus!='nomore') {
				this.page++;
				this.getList();
			}
		},
		methods: {
			tabChange(index) {
				if(this.current==index) return;
				this.current = index;
				this.page = 1;
				this.loadStatus = 'loading';
				this.list = [];
				this.getList();
			},
			async getList() {
				this.loadStatus = 'loading';
				let res = await this.$api('acceptSign')
				this.list = this.list.concat(res.data.list);
				if (this.page === res.data.total_pages || res.data.total_pages === 0) {
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loadmore';
				}
			},	
			jump(url) {
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>

.nav-icon {
	width: 90rpx;
	height: 90rpx;
	margin-bottom: 10rpx;
}

.msg-wrap{
	background-color: #FFFFFF;
	margin-top: 20rpx;
	.title{
		margin: 20rpx;
	}
	.msg-item{
		padding: 20rpx;
		display: flex;
		.avatar-box{
			position: relative;
			.avatar{
				margin-right: 20rpx;
				
			}
		}
	
		.right{
			display: flex;
			flex-direction: column;
			flex: 1;
			.desc{
				font-size: 24rpx;
				color: #999;
				display: flex;
				.time{
					white-space: nowrap;
					margin-left: auto;
				}
			}
		}
	}
}

  // 
  .msg-empty{
	  display: flex;
	  flex-direction: column;
	  align-items:center ;
	  min-height: 800rpx;
	  .img{
		 width: 200rpx;
		 margin-top: 100rpx;
	  }
	  .txt{
		  color: #999;
		  font-size: 20rpx;
		  margin-top: 20rpx;
	  }
  }
  
.comment-msg-item {
	display: flex;
	background-color: #fff;
	border-bottom: 1px solid #f5f5f5;
	padding: 20rpx;
}
.comment-msg-item .msg-c{
  	width: 100%;
}
.comment-msg-item .avatar {
  	margin-right: 10rpx;
}
  
.comment-msg-item .post-c {
  	background-color: #eee;
  	margin-top: 20rpx;
  	padding: 20rpx;
  	font-size: 12px;
  	line-height: 1.8;
  	border-radius: 10rpx;
}
  
.comment-msg-item .post-c .post-c-txt {
  	text-overflow: ellipsis;
  	display: -webkit-box;
  	word-break: break-all;
  	-webkit-box-orient: vertical;
  	-webkit-line-clamp: 5;
  	overflow: hidden;
}
  
.comment-msg-item .msg-c {
  	display: flex;
  	flex-direction: column;
}
.comment-msg-item .msg-c .msg-c-t{
	margin-bottom: 20rpx;
  	display: flex;
}
  
.comment-msg-item .msg-c .msg-c-t .time{
  	font-size: 10px;
  	color: #999;
  	margin-left: auto;
}
.comment-msg-item .msg-c .username {
  	margin-bottom: 10rpx;
  	color: #2B85E4;
}
.comment-msg-item .msg-c .msg-c-txt{
  	display: flex;
  	align-items: center;
}
.comment-msg-item .msg-c .msg-c-txt .dot{
  	width: 10rpx;
  	height: 10rpx;
  	background-color: #FA3534;
  	border-radius: 50%;
  	display: block;
  	margin-left: 20rpx;
}
.tag-box {
	.tag{
		padding: 0rpx 10rpx;
		border-radius: 5rpx;
		font-size: 22rpx;
		background-color: #f5f5f5;
		color: #616161;
	}
	
	.tag-guaranty {
		color: #ffffff;
		background-color: #24B19A;
	}
	
	.tag-cert {
		color: #ffffff;
		background-color: #5A84FB;
	}
}
</style>
